<template>
  <div class="container">
    <div class="app-container">

      <!-- 左树 -->
      <div class="left">
        <el-input prefix-icon="el-icon-search" style="margin-bottom: 10px" size="mini" placeholder="输入员工姓名全员搜索" />
        <el-tree
          :default-expand-all="true"
          :highlight-current="true"
          :expand-on-click-node="false"
          :data="treeData"
          :props="defaultProps"
        />
      </div>

      <!-- 右表 -->
      <div class="right">
        <el-row class="operate-tools" type="flex" justify="end">
          <el-button icon="el-icon-circle-plus-outline" size="mini" type="primary">添加员工</el-button>
          <el-button icon="el-icon-download" size="mini" type="primary">Excel导入</el-button>
          <el-button icon="el-icon-upload2" size="mini" type="primary">Excel导出</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { transListToTreeData } from '@/utils'
import { departmentListService } from '@/api/department'
export default {
  name: 'Employee',
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  async created() {
    await this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      const result = await departmentListService()
      this.treeData = transListToTreeData(result, 0)
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  .app-container {
    display: flex;
    background-color: #fff;
    .left {
      width: 280px;
      padding: 20px;
      border-right: 1px solid #eaeef4;
    }

    .right {
      flex: 1;
      padding: 20px;
      .username {
        height: 30px;
        width: 30px;
        line-height: 30;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        background: #04c9be;
        font-size: 12px;
      }
    }
  }
}
</style>
